Conditions | 1 |
Paths | 1 |
Total Lines | 167 |
Lines | 0 |
Ratio | 0 % |
Changes | 2 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | const GitAmp = (function(exports, $) { |
||
132 | const Gui = (function() { |
||
133 | const scaleFactor = 6; |
||
134 | const textColor = '#ffffff'; |
||
135 | const maxLife = 20000; |
||
136 | |||
137 | function Gui() { |
||
138 | //noinspection JSUnresolvedVariable |
||
139 | this.svg = exports.d3.select('#area').append('svg'); |
||
140 | |||
141 | exports.addEventListener('resize', this.resize.bind(this)); |
||
142 | |||
143 | this.setupVolumeSlider(); |
||
144 | this.resize(); |
||
145 | } |
||
146 | |||
147 | Gui.prototype.setupVolumeSlider = function() { |
||
148 | //noinspection JSUnresolvedFunction |
||
149 | $('#volumeSlider').slider({ |
||
150 | max: 100, |
||
151 | min: 0, |
||
152 | value: volume * 100, |
||
153 | slide: function (event, ui) { |
||
154 | //noinspection JSUnresolvedVariable |
||
155 | exports.Howler.volume(ui.value/100.0); |
||
156 | }, |
||
157 | change: function (event, ui) { |
||
158 | //noinspection JSUnresolvedVariable |
||
159 | exports.Howler.volume(ui.value/100.0); |
||
160 | } |
||
161 | }); |
||
162 | }; |
||
163 | |||
164 | Gui.prototype.getWidth = function() { |
||
165 | return exports.innerWidth; |
||
166 | }; |
||
167 | |||
168 | Gui.prototype.getHeight = function() { |
||
169 | return exports.innerHeight - $('header').height(); |
||
170 | }; |
||
171 | |||
172 | Gui.prototype.resize = function() { |
||
173 | this.svg.attr('width', this.getWidth()); |
||
174 | this.svg.attr('height', this.getHeight()); |
||
175 | }; |
||
176 | |||
177 | Gui.prototype.drawEvent = function(event) { |
||
178 | let opacity = 1 / (100 / event.getMessage().length); |
||
179 | |||
180 | if (opacity > 0.5) { |
||
181 | opacity = 0.5; |
||
182 | } |
||
183 | |||
184 | let size = event.getMessage().length; |
||
185 | let label_text; |
||
186 | let ring_radius = 80; |
||
187 | let ring_anim_duration = 3000; |
||
188 | |||
189 | let edit_color = '#FFFFFF'; |
||
190 | |||
191 | switch(event.getType()){ |
||
192 | case "PushEvent": |
||
193 | label_text = event.getActorName() + " pushed to " + event.getRepositoryName(); |
||
194 | edit_color = '#22B65D'; |
||
195 | break; |
||
196 | case "PullRequestEvent": |
||
197 | label_text = event.getActorName() + " " + |
||
198 | event.getAction() + " " + " a PR for " + event.getRepositoryName(); |
||
199 | edit_color = '#8F19BB'; |
||
200 | ring_anim_duration = 10000; |
||
201 | ring_radius = 600; |
||
202 | break; |
||
203 | case "IssuesEvent": |
||
204 | label_text = event.getActorName() + " " + |
||
205 | event.getAction() + " an issue in " + event.getRepositoryName(); |
||
206 | edit_color = '#ADD913'; |
||
207 | break; |
||
208 | case "IssueCommentEvent": |
||
209 | label_text = event.getActorName() + " commented in " + event.getRepositoryName(); |
||
210 | edit_color = '#FF4901'; |
||
211 | break; |
||
212 | case "ForkEvent": |
||
213 | label_text = event.getActorName() + " forked " + event.getRepositoryName(); |
||
214 | edit_color = '#0184FF'; |
||
215 | break; |
||
216 | case "CreateEvent": |
||
217 | label_text = event.getActorName() + " created " + event.getRepositoryName(); |
||
218 | edit_color = '#00C0C0'; |
||
219 | break; |
||
220 | case "WatchEvent": |
||
221 | label_text = event.getActorName() + " watched " + event.getRepositoryName(); |
||
222 | edit_color = '#E60062'; |
||
223 | break; |
||
224 | } |
||
225 | |||
226 | let no_label = false; |
||
227 | |||
228 | size = Math.max(Math.sqrt(Math.abs(size)) * scaleFactor, 3); |
||
229 | |||
230 | //noinspection JSUnresolvedFunction |
||
231 | Math.seedrandom(event.getMessage()); |
||
232 | let x = Math.random() * (this.getWidth() - size) + size; |
||
233 | let y = Math.random() * (this.getHeight() - size) + size; |
||
234 | |||
235 | let circle_group = this.svg.append('g') |
||
236 | .attr('transform', 'translate(' + x + ', ' + y + ')') |
||
237 | .attr('fill', edit_color) |
||
238 | .style('opacity', 1); |
||
239 | |||
240 | let ring = circle_group.append('circle'); |
||
241 | ring.attr({r: size, stroke: 'none'}); |
||
242 | ring.transition() |
||
243 | .attr('r', size + ring_radius) |
||
244 | .style('opacity', 0) |
||
245 | .ease(Math.sqrt) |
||
246 | .duration(ring_anim_duration) |
||
247 | .remove(); |
||
248 | |||
249 | let circle_container = circle_group.append('a'); |
||
250 | circle_container.attr('xlink:href', event.getUrl()); |
||
251 | circle_container.attr('target', '_blank'); |
||
252 | circle_container.attr('fill', textColor); |
||
253 | |||
254 | let circle = circle_container.append('circle'); |
||
255 | circle.classed(event.getType(), true); |
||
256 | circle.attr('r', size) |
||
257 | .attr('fill', edit_color) |
||
258 | .transition() |
||
259 | .duration(maxLife) |
||
260 | .style('opacity', 0) |
||
261 | .remove(); |
||
262 | |||
263 | circle_container.on('mouseover', function() { |
||
264 | circle_container.append('text') |
||
265 | .text(label_text) |
||
266 | .classed('label', true) |
||
267 | .attr('text-anchor', 'middle') |
||
268 | .attr('font-size', '0.8em') |
||
269 | .transition() |
||
270 | .delay(1000) |
||
271 | .style('opacity', 0) |
||
272 | .duration(2000) |
||
273 | .each(function() { no_label = true; }) |
||
274 | .remove(); |
||
275 | }); |
||
276 | |||
277 | let text = circle_container.append('text') |
||
278 | .text(label_text) |
||
279 | .classed('article-label', true) |
||
280 | .attr('text-anchor', 'middle') |
||
281 | .attr('font-size', '0.8em') |
||
282 | .transition() |
||
283 | .delay(2000) |
||
284 | .style('opacity', 0) |
||
285 | .duration(5000) |
||
286 | .each(function() { no_label = true; }) |
||
287 | .remove(); |
||
288 | |||
289 | // Remove HTML of decayed events |
||
290 | // Keep it less than 50 |
||
291 | let $area = $('#area'); |
||
292 | if($area.find('svg g').length > 50){ |
||
293 | $area.find('svg g:lt(10)').remove(); |
||
294 | } |
||
295 | }; |
||
296 | |||
297 | return Gui; |
||
298 | }()); |
||
299 | |||
556 |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.